<template>
    <div class="gui_ji">
      <Banner></Banner>
      <mainContent catname="走访轨迹">
        <div slot="menu_list">
          <dl>
            <dt class="menu_dt" :style="{backgroundImage: 'url(' + this.$util.storage.get('menu_bg') + ')'}">走访轨迹</dt>
          </dl>
        </div>
        <div slot="inner_content" style="box-sizing: border-box;">
          <div class="guiji">
            <!--轨迹地图-->
            <div id="mapDiv"></div>
            <!--轨迹地图-->

          </div>
        </div>
      </mainContent>
      <MainMenu>
      </MainMenu>
      <footerBar></footerBar>
    </div>
</template>

<script>
  import Banner from '../../../components/bannder/Banner'
  import mainContent from '../../../components/content/mainContent'
  import MainMenu from '../../../components/mainmenu/MainMenu'
  import footerBar from '../../../components/content/footerBar'
    export default {
        name: "GuiJi",
        components:{
          Banner,
          mainContent,
          MainMenu,
          footerBar,
        },

        data(){
          return{
            id: this.$route.query.id,
            uid: this.$route.query.uid,
            list: []
          }
        },

        mounted() {
          this.loadmap();
        },
        methods: {
          loadmap() {
            let that = this;
            let map = new T.Map("mapDiv");
            that.map = map;
            map.centerAndZoom(new T.LngLat(116.38033, 30.98279), 15);
            map.enableScrollWheelZoom();

            that.$http.get("api/GriderProgramApi/getGriderVisitLog?id="+that.id+"&uid="+that.uid, null, r=>{
            
              console.log("地图信息：",r.data);
              that.list = r.data.list;

              let pointsArr = [];

              // 绘制网格长地图数据
              for (var i = 0; i <= that.list.length - 1; i++) {

                let pointStr = that.list[i].location;
                let pointArr = pointStr.split(",");

                let point = new T.LngLat(pointArr[0], pointArr[1]);
                pointsArr.push(point);

                let icon = new T.Icon({
                    iconUrl: "/static/marker1.png",
                    iconSize: new T.Point(30, 35),
                    iconAnchor: new T.Point(15, 35)
                });

                let marker = new T.Marker(point, {icon: icon});
                map.addOverLay(marker);
              }
              var line = new T.Polyline(pointsArr ,{
                  color: "#29be74", weight: 3, opacity: 1
              });
              map.addOverLay(line);

              

              let points = [];
              for (var i = 0; i <= r.data.grid.area_arr.length - 1; i++) {
                let pointArr = r.data.grid.area_arr[i];
                let point = new T.LngLat(pointArr[0], pointArr[1]);
                points.push(point);
              }

              if (pointsArr.length > 0) {
                that.map.setViewport(pointsArr); 
              } else {
                that.map.setViewport(points); 
              }

              //创建面对象
              let polygon = new T.Polygon(points, {
                color: "#1d70fc", weight: 2, lineStyle: "dashed", opacity: 1, fillColor: "#1d70fc", fillOpacity: 0.1
              });
              map.addOverLay(polygon);

            });

            var ctrl = new T.Control.MapType([
              {
                title: "地图", //地图控件上所要显示的图层名称
                icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小80x80）
                layer: TMAP_NORMAL_MAP //地图类型对象，即MapType。
              },
              {
                title: "卫星混合",
                icon:
                  "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
                layer: TMAP_HYBRID_MAP
              }
            ]);
            that.map.addControl(ctrl);

          }
        }
    }
</script>

<style scoped>
  .guiji{
    height: 700px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 60px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 30px;
  }
  .guiji_map{
    height: 100%;
    width: 100%;
    background: red;
  }

  #mapDiv {
    height: 100%;
    width: 100%;
  }

</style>
